<template>
  <view class="cu-radio-group" :class="{ column: isColumn }">
    <view
      class="cu-radio-item"
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: value == item[props.value] }"
      @click="radioClickHandle(item)"
    >
      <image class="icon-style" v-show="value !== item[props.value]" src="/static/images/radio_no.png" mode="aspectFit">
      </image>
      <image
        class="icon-style"
        v-show="value === item[props.value]"
        src="/static/images/radio_yes.png"
        mode="aspectFit"
      >
      </image>
      <text class="content">{{ item[props.label] }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'cu-radio-group',
  props: {
    value: '',
    list: {
      type: Array,
      default: () => []
    },
    // true 竖向排列，一条一行;  false 横向排列，
    isColumn: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => ({
        value: 'value',
        label: 'label'
      })
    }
  },
  data() {
    return {
      active: undefined
    }
  },
  methods: {
    radioClickHandle(item) {
      this.$emit('input', item[this.props.value])
      this.$emit('change', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-radio-group {
  display: flex;
  flex-wrap: wrap;
  &.column {
    flex-direction: column;
  }
  .cu-radio-item {
    display: flex;
    align-items: center;
    color: #333;
    line-height: 42rpx;
    padding-right: 50rpx;

    .icon-style {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    .content {
      flex: 1;
    }
  }
}
</style>
